<script lang="ts" setup>

    const selectedReportType=''
    // import { ArrowDown } from '@element-plus/icons-vue'


</script>


<template >
<div class="select base">
    <select v-model="selectedReportType" id="report-type" class="custom-select">
      <option value="" selected >下拉选择你想要反馈的实验</option>
      <option value="ip">内压实验</option>
      <option value="exp">外压实验</option>
      <option value="bla">爆破实验</option>
    </select>
</div>
<div class="file base">
    <div class="shangchuan">
        <input type="file" accept=".pdf, .doc, .docx" class="custom-input">
    </div>
    
    <div class="bref">
        <p>
            点击上传您的实验报告<br/>
            （以“班级-姓名-学号”命名）
        </p>
    </div>
</div>
<div class="intro">
    <p>如对实验室有任何建议或者问题等，欢迎诸位进行反馈<br/> 
       在此编写您所反馈的信息
    </p>
</div>

<!-- <div>
    <el-dropdown>
    <span class="el-dropdown-link">
      Dropdown List
      <el-icon class="el-icon--right">
        <arrow-down />
      </el-icon>
    </span>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item>Action 1</el-dropdown-item>
        <el-dropdown-item>Action 2</el-dropdown-item>
        <el-dropdown-item>Action 3</el-dropdown-item>
        <el-dropdown-item disabled>Action 4</el-dropdown-item>
        <el-dropdown-item divided>Action 5</el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>

</div> -->
</template>

<style>
.example-showcase .el-dropdown-link {
  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
}

.base {
    display: flex;
    justify-content: center; 
    align-items: center;
}
.select {
    width: 650px;
    height: 80px;
}
.custom-select {
  width: 280px; /* 设置宽度 */
  height: 60px; /* 设置高度 */
  border: none;
  outline: none;
  font-size: 18px; /* 设置文字大小 */
  background-color: rgb(245,245,245);
  border: 1px solid #ccc;
}
.file {
    width: 650px;
    height: 370px;
    background-color:white;
    flex-direction: column;
    border: 1px solid #ccc;
}
.custom-input {
    border: none;
    outline: none;
    appearance: none; /* 清除默认样式 */
      /* 清除选择文件和未选择文件的文字 */
    -webkit-appearance: none; /* 清除默认的 WebKit 样式 */
    appearance: none; /* 清除默认样式 */
    width: 172px;
    height: 68px;
    background-color: rgb(123,182,237); /* 设置背景颜色 */
    border: 1px solid #ccc; /* 设置边框样式 */
    padding: 5px; /* 设置内边距，使文本内容与边框有一定距离 */
    font-size: 16px; /* 设置文字大小 */

}
.bref>p{
    font-size: 20px;
    text-align: center;
}
.intro {
    width: 650px;
    height: 130px;
    background-color:white;

}
.intro>p{
    font-size: 20px;
    text-align: left;
}
</style>
